d3plus-viz

d3plus-viz

Abstract ES6 class that drives d3plus visualizations.

Installing

If you use NPM, run npm install d3plus-viz --save. Otherwise, download the latest release. The released bundle supports AMD, CommonJS, and vanilla environments. You can also load directly from d3plus.org:

<script src="https://d3plus.org/js/d3plus-viz.v0.11.full.min.js"></script>

API Reference

• Viz

• dataFold - Given a JSON object where the data values and headers have been split into separate key lookups, this function will combine the data values with the headers and returns one large array of objects.
• dataLoad - Loads data from a filepath or URL, converts it to a valid JSON object, and returns it to a callback function.

---

Viz <>

This is a global class, and extends all of the methods and functionality of BaseClass.

• Viz ⇐ BaseClass
  • new Viz()
  • .render([callback]) ↩︎
  • .active([value]) ↩︎
  • .aggs([value]) ↩︎
  • .backConfig([value]) ↩︎
  • .cache([value]) ↩︎
  • .color([value]) ↩︎
  • .colorScale([value]) ↩︎
  • .colorScaleConfig([value]) ↩︎
  • .colorScalePosition([value]) ↩︎
  • .controls([value]) ↩︎
  • .controlConfig([value]) ↩︎
  • .data(data, [formatter]) ↩︎
  • .depth([value]) ↩︎
  • .desc([value]) ↩︎
  • .detectResize(value) ↩︎
  • .detectResizeDelay(value) ↩︎
  • .detectVisible(value) ↩︎
  • .detectVisibleInterval(value) ↩︎
  • .discrete([value]) ↩︎
  • .downloadButton([value]) ↩︎
  • .downloadConfig([value]) ↩︎
  • .downloadPosition([value]) ↩︎
  • .duration([ms]) ↩︎
  • .filter([value]) ↩︎
  • .groupBy([value]) ↩︎
  • .height([value]) ↩︎
  • .hover([value]) ↩︎
  • .label([value]) ↩︎
  • .legend([value]) ↩︎
  • .legendConfig([value]) ↩︎
  • .legendTooltip([value]) ↩︎
  • .legendPosition([value]) ↩︎
  • .loadingHTML([value]) ↩︎
  • .loadingMessage([value]) ↩︎
  • .locale([value]) ↩︎
  • .messageMask([value]) ↩︎
  • .messageStyle([value]) ↩︎
  • .noDataHTML([value]) ↩︎
  • .noDataMessage([value]) ↩︎
  • .scrollContainer(selector) ↩︎
  • .select([selector]) ↩︎
  • .shape([value]) ↩︎
  • .shapeConfig([value]) ↩︎
  • .time([value]) ↩︎
  • .timeFilter([value]) ↩︎
  • .timeline([value]) ↩︎
  • .timelineConfig([value]) ↩︎
  • .title([value]) ↩︎
  • .titleConfig([value]) ↩︎
  • .tooltip([value]) ↩︎
  • .tooltipConfig([value]) ↩︎
  • .total([value]) ↩︎
  • .totalConfig([value]) ↩︎
  • .totalFormat(value) ↩︎
  • .width([value]) ↩︎
  • .zoom(value) ↩︎
  • .zoomBrushHandleSize(value) ↩︎
  • .zoomBrushHandleStyle(value) ↩︎
  • .zoomBrushSelectionStyle(value) ↩︎
  • .zoomControlStyle(value) ↩︎
  • .zoomControlStyleActive(value) ↩︎
  • .zoomControlStyleHover(value) ↩︎
  • .zoomFactor(value) ↩︎
  • .zoomMax(value) ↩︎
  • .zoomPan(value) ↩︎
  • .zoomPadding(value) ↩︎
  • .zoomScroll([value]) ↩︎

# new Viz()

Creates an x/y plot based on an array of data. If data is specified, immediately draws the tree map based on the specified array and returns the current class instance. If data is not specified on instantiation, it can be passed/updated after instantiation using the data method. See this example for help getting started using the treemap generator.

# Viz.render([callback]) <>

Draws the visualization given the specified configuration.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.active([value]) <>

If value is specified, sets the active method to the specified function and returns the current class instance.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.aggs([value]) <>

If value is specified, sets the aggregation method for each key in the object and returns the current class instance.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.backConfig([value]) <>

If value is specified, sets the config method for the back button and returns the current class instance.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.cache([value]) <>

Enables a lru cache that stores up to 5 previously loaded files/URLs. Helpful when constantly writing over the data array with a URL in the render function of a react component.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.color([value]) <>

Defines the main color to be used for each data point in a visualization. Can be either an accessor function or a string key to reference in each data point. If a color value is returned, it will be used as is. If a string is returned, a unique color will be assigned based on the string.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.colorScale([value]) <>

Defines the value to be used for a color scale. Can be either an accessor function or a string key to reference in each data point.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.colorScaleConfig([value]) <>

A pass-through to the config method of ColorScale.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.colorScalePosition([value]) <>

Defines which side of the visualization to anchor the color scale. Acceptable values are "top", "bottom", "left", "right", and false. A false value will cause the color scale to not be displayed, but will still color shapes based on the scale.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.controls([value]) <>

Defines a list of controls to be rendered at the bottom of the visualization.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.controlConfig([value]) <>

If value is specified, sets the config method for the controls and returns the current class instance.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.data(data, [formatter]) <>

Sets the primary data array to be used when drawing the visualization. The value passed should be an Array of objects or a String representing a filepath or URL to be loaded. The following filetypes are supported: csv, tsv, txt, and json.

Additionally, a custom formatting function can be passed as a second argument to this method. This custom function will be passed the data that has been loaded, as long as there are no errors. This function should return the final array of obejcts to be used as the primary data array. For example, some JSON APIs return the headers split from the data values to save bandwidth. These would need be joined using a custom formatter.

If data is not specified, this method returns the current primary data array, which defaults to an empty array ([]);

This is a static method of Viz, and is chainable with other methods of this Class.

Param	Type	Description
data	Array | String	= []
[formatter]	function

# Viz.depth([value]) <>

If value is specified, sets the depth to the specified number and returns the current class instance. The value should correspond with an index in the groupBy array.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.desc([value]) <>

If value is specified, sets the description accessor to the specified string and returns the current class instance.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.detectResize(value) <>

If the width and/or height of a Viz is not user-defined, it is determined by the size of it's parent element. When this method is set to true, the Viz will listen for the window.onresize event and adjust it's dimensions accordingly.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.detectResizeDelay(value) <>

When resizing the browser window, this is the millisecond delay to trigger the resize event.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.detectVisible(value) <>

Toggles whether or not the Viz should try to detect if it visible in the current viewport. When this method is set to true, the Viz will only be rendered when it has entered the viewport either through scrolling or if it's display or visibility is changed.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.detectVisibleInterval(value) <>

The interval, in milliseconds, for checking if the visualization is visible on the page.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.discrete([value]) <>

If value is specified, sets the discrete accessor to the specified method name (usually an axis) and returns the current class instance.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.downloadButton([value]) <>

Shows a button that allows for downloading the current visualization.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.downloadConfig([value]) <>

Sets specific options of the saveElement function used when downloading the visualization.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.downloadPosition([value]) <>

Defines which control group to add the download button into.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.duration([ms]) <>

If ms is specified, sets the animation duration to the specified number and returns the current class instance. If ms is not specified, returns the current animation duration.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.filter([value]) <>

If value is specified, sets the filter to the specified function and returns the current class instance.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.groupBy([value]) <>

If value is specified, sets the group accessor(s) to the specified string, function, or array of values and returns the current class instance.

This is a static method of Viz, and is chainable with other methods of this Class.

function value(d) {
  return d.id;
}

# Viz.height([value]) <>

If value is specified, sets the overall height to the specified number and returns the current class instance.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.hover([value]) <>

If value is specified, sets the hover method to the specified function and returns the current class instance.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.label([value]) <>

If value is specified, sets the label accessor to the specified function or string and returns the current class instance.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.legend([value]) <>

If value is specified, toggles the legend based on the specified boolean and returns the current class instance.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.legendConfig([value]) <>

If value is specified, the object is passed to the legend's config method.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.legendTooltip([value]) <>

If value is specified, sets the config method for the legend tooltip and returns the current class instance.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.legendPosition([value]) <>

Defines which side of the visualization to anchor the legend. Expected values are "top", "bottom", "left", and "right".

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.loadingHTML([value]) <>

Sets the inner HTML of the status message that is displayed when loading AJAX requests and displaying errors. Must be a valid HTML string or a function that, when passed this Viz instance, returns a valid HTML string.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.loadingMessage([value]) <>

Toggles the visibility of the status message that is displayed when loading AJAX requests and displaying errors.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.locale([value]) <>

If value is specified, sets the locale to the specified string and returns the current class instance.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.messageMask([value]) <>

Sets the color of the mask used underneath the status message that is displayed when loading AJAX requests and displaying errors. Additionally, false will turn off the mask completely.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.messageStyle([value]) <>

Defines the CSS style properties for the status message that is displayed when loading AJAX requests and displaying errors.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.noDataHTML([value]) <>

Sets the inner HTML of the status message that is displayed when no data is supplied to the visualization. Must be a valid HTML string or a function that, when passed this Viz instance, returns a valid HTML string.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.noDataMessage([value]) <>

Toggles the visibility of the status message that is displayed when no data is supplied to the visualization.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.scrollContainer(selector) <>

If using scroll or visibility detection, this method allow a custom override of the element to which the scroll detection function gets attached.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.select([selector]) <>

If selector is specified, sets the SVG container element to the specified d3 selector or DOM element and returns the current class instance. If selector is not specified, returns the current SVG container element, which is undefined by default.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.shape([value]) <>

If value is specified, sets the shape accessor to the specified function or number and returns the current class instance.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.shapeConfig([value]) <>

If value is specified, sets the config method for each shape and returns the current class instance.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.time([value]) <>

If value is specified, sets the time accessor to the specified function or string and returns the current class instance.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.timeFilter([value]) <>

If value is specified, sets the time filter to the specified function and returns the current class instance.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.timeline([value]) <>

If value is specified, toggles the timeline based on the specified boolean and returns the current class instance.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.timelineConfig([value]) <>

If value is specified, sets the config method for the timeline and returns the current class instance.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.title([value]) <>

If value is specified, sets the title accessor to the specified function or string and returns the current class instance.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.titleConfig([value]) <>

If value is specified, sets the config method for the title and returns the current class instance.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.tooltip([value]) <>

If value is specified, toggles the tooltip based on the specified boolean and returns the current class instance.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.tooltipConfig([value]) <>

If value is specified, sets the config method for the tooltip and returns the current class instance.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.total([value]) <>

If value is specified, sets the total accessor to the specified function or string and returns the current class instance.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.totalConfig([value]) <>

If value is specified, sets the config method for the total and returns the current class instance.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.totalFormat(value) <>

Formatter function for the value in the total bar.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.width([value]) <>

If value is specified, sets the overallwidth to the specified number and returns the current class instance.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.zoom(value) <>

Toggles the ability to zoom/pan the visualization. Certain parameters for zooming are required to be hooked up on a visualization by visualization basis.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.zoomBrushHandleSize(value) <>

The pixel stroke-width of the zoom brush area.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.zoomBrushHandleStyle(value) <>

An object containing CSS key/value pairs that is used to style the outer handle area of the zoom brush. Passing false will remove all default styling.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.zoomBrushSelectionStyle(value) <>

An object containing CSS key/value pairs that is used to style the inner selection area of the zoom brush. Passing false will remove all default styling.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.zoomControlStyle(value) <>

An object containing CSS key/value pairs that is used to style each zoom control button (.zoom-in, .zoom-out, .zoom-reset, and .zoom-brush). Passing false will remove all default styling.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.zoomControlStyleActive(value) <>

An object containing CSS key/value pairs that is used to style each zoom control button when active (.zoom-in, .zoom-out, .zoom-reset, and .zoom-brush). Passing false will remove all default styling.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.zoomControlStyleHover(value) <>

An object containing CSS key/value pairs that is used to style each zoom control button on hover (.zoom-in, .zoom-out, .zoom-reset, and .zoom-brush). Passing false will remove all default styling.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.zoomFactor(value) <>

The multiplier that is used in with the control buttons when zooming in and out.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.zoomMax(value) <>

If value is specified, sets the max zoom scale to the specified number and returns the current class instance. If value is not specified, returns the current max zoom scale.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.zoomPan(value) <>

If value is specified, toggles panning to the specified boolean and returns the current class instance. If value is not specified, returns the current panning value.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.zoomPadding(value) <>

A pixel value to be used to pad all sides of a zoomed area.

This is a static method of Viz, and is chainable with other methods of this Class.

# Viz.zoomScroll([value]) <>

If value is specified, toggles scroll zooming to the specified boolean and returns the current class instance. If value is not specified, returns the current scroll zooming value.

This is a static method of Viz, and is chainable with other methods of this Class.

---

d3plus.dataFold(json, [data], [headers]) <>

Given a JSON object where the data values and headers have been split into separate key lookups, this function will combine the data values with the headers and returns one large array of objects.

This is a global function.

Param	Type	Default	Description
json	Object		A JSON data Object with data and headers keys.
[data]	String	"data"	The key used for the flat data array inside of the JSON object.
[headers]	String	"headers"	The key used for the flat headers array inside of the JSON object.

---

d3plus.dataLoad(path, [formatter], [key], [callback]) <>

Loads data from a filepath or URL, converts it to a valid JSON object, and returns it to a callback function.

This is a global function.

Param	Type	Description
path	Array | String	The path to the file or url to be loaded. If an Array is passed, the xhr request logic is skipped.
[formatter]	function	An optional formatter function that is run on the loaded data.
[key]	String	The key in the this context to save the resulting data to.
[callback]	function	A function that is called when the final data is loaded. It is passed 2 variables, any error present and the data loaded.

---

_{Documentation generated on Fri, 03 Aug 2018 14:54:10 GMT}